<template>
  <div class="dashboard">
    <!-- 欢迎区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <div class="welcome-content">
            <h2>欢迎使用公众号管理系统</h2>
            <p class="version">当前版本：{{ version }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 微信配置信息 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon>
                <Setting />
              </el-icon>
              <span>微信配置信息</span>
            </div>
          </template>
          <div class="wx-config" v-if="wxConfig">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="应用ID">{{ wxConfig.appId }}</el-descriptions-item>
              <el-descriptions-item label="应用密钥">{{ wxConfig.appSecret }}</el-descriptions-item>
              <el-descriptions-item label="Token">{{ wxConfig.token }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="wxConfig.enabled ? 'success' : 'danger'">
                  {{ wxConfig.enabled ? '已启用' : '已禁用' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <div class="actions mt-4">
              <el-button type="primary" @click="handleEditConfig">编辑配置</el-button>
            </div>
          </div>
          <el-empty v-else description="暂无配置信息" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据概览 -->
    <el-row :gutter="20" class="mt-4">
      <!-- 客户统计 -->
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <User />
              </el-icon>
              <span>客户统计</span>
            </div>
          </template>
          <div class="data-content">
            <h3>{{ customerCount }}</h3>
            <p>总客户数</p>
            <el-button type="primary" link @click="router.push('/customer')">查看详情</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 消息统计 -->
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <ChatDotRound />
              </el-icon>
              <span>消息统计</span>
            </div>
          </template>
          <div class="data-content">
            <h3>{{ messageCount }}</h3>
            <p>总消息数</p>
            <el-button type="primary" link @click="router.push('/message')">查看详情</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 智能体统计 -->
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <Monitor />
              </el-icon>
              <span>智能体统计</span>
            </div>
          </template>
          <div class="data-content">
            <h3>{{ agentCount }}</h3>
            <p>智能体数量</p>
            <el-button type="primary" link @click="router.push('/agent')">查看详情</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 套餐信息 -->
    <el-row :gutter="20" class="mt-4">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-icon>
                <Goods />
              </el-icon>
              <span>套餐信息</span>
            </div>
          </template>
          <el-table :data="packages" style="width: 100%">
            <el-table-column prop="name" label="套餐名称" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="description" label="描述" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button type="primary" link @click="handleViewPackage(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Setting, User, ChatDotRound, Monitor, Goods } from '@element-plus/icons-vue'
import { getCurrentUserWxConfig } from '@/api/app-store/wx'
import { listCustomer } from '@/api/app-store/customer'
import { listMessage } from '@/api/app-store/message'
import { listAgent } from '@/api/app-store/agent'
import { listPackage } from '@/api/app-store/package'

const router = useRouter()
const version = ref('3.8.4')

// 微信配置信息
const wxConfig = ref(null)
const getWxConfig = async () => {
  try {
    const response = await getCurrentUserWxConfig()
    wxConfig.value = response.data
  } catch (error) {
    console.error('获取微信配置失败:', error)
  }
}

// 统计数据
const customerCount = ref(0)
const messageCount = ref(0)
const agentCount = ref(0)
const packages = ref([])

// 获取统计数据
const getStatistics = async () => {
  try {
    const [customerRes, messageRes, agentRes, packageRes] = await Promise.all([
      listCustomer({ pageSize: 1 }),
      listMessage({ pageSize: 1 }),
      listAgent({ pageSize: 1 }),
      listPackage()
    ])

    customerCount.value = customerRes.total || 0
    messageCount.value = messageRes.total || 0
    agentCount.value = agentRes.total || 0
    packages.value = packageRes.rows || []
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 处理编辑配置
const handleEditConfig = () => {
  router.push('/wx')
}

// 查看套餐详情
const handleViewPackage = (row) => {
  router.push(`/package?id=${row.id}`)
}

onMounted(() => {
  getWxConfig()
  getStatistics()
})
</script>

<style scoped lang="scss">
.dashboard {
  padding: 20px;

  .welcome-card {
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);

    .welcome-content {
      text-align: center;
      color: white;
      padding: 20px;

      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }

      .version {
        font-size: 14px;
        opacity: 0.8;
      }
    }
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-icon {
      font-size: 18px;
    }

    span {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .data-card {
    height: 100%;

    .data-content {
      text-align: center;
      padding: 20px 0;

      h3 {
        font-size: 28px;
        color: #1890ff;
        margin-bottom: 10px;
      }

      p {
        color: #666;
        margin-bottom: 15px;
      }
    }
  }

  .actions {
    text-align: right;
  }

  .mt-4 {
    margin-top: 1rem;
  }
}
</style>